8d:I[903690,["/chat-static/_next/static/chunks/1j0feqpmh6fhf.js?dpl=dpl_BBh7b8nxE32otBwcMX89KM8LLHcD","/chat-static/_next/static/chunks/30d-un2oicmhe.js?dpl=dpl_BBh7b8nxE32otBwcMX89KM8LLHcD","/chat-static/_next/static/chunks/00c0bu24wji78.js?dpl=dpl_BBh7b8nxE32otBwcMX89KM8LLHcD","/chat-static/_next/static/chunks/2druaqheowhl8.js?dpl=dpl_BBh7b8nxE32otBwcMX89KM8LLHcD","/chat-static/_next/static/chunks/0_e8e66vbc81m.js?dpl=dpl_BBh7b8nxE32otBwcMX89KM8LLHcD","/chat-static/_next/static/chunks/2gyzl_dalq47j.js?dpl=dpl_BBh7b8nxE32otBwcMX89KM8LLHcD","/chat-static/_next/static/chunks/0sex0gcwdsmjy.js?dpl=dpl_BBh7b8nxE32otBwcMX89KM8LLHcD","/chat-static/_next/static/chunks/0wkge2f3s0f22.js?dpl=dpl_BBh7b8nxE32otBwcMX89KM8LLHcD","/chat-static/_next/static/chunks/1ggzqs8-kdl22.js?dpl=dpl_BBh7b8nxE32otBwcMX89KM8LLHcD","/chat-static/_next/static/chunks/0rrc9lo-bkkh5.js?dpl=dpl_BBh7b8nxE32otBwcMX89KM8LLHcD","/chat-static/_next/static/chunks/1j5k8gvtw8gdc.js?dpl=dpl_BBh7b8nxE32otBwcMX89KM8LLHcD","/chat-static/_next/static/chunks/42mjea_hxrwdp.js?dpl=dpl_BBh7b8nxE32otBwcMX89KM8LLHcD","/chat-static/_next/static/chunks/0a4mwgsvj_bqu.js?dpl=dpl_BBh7b8nxE32otBwcMX89KM8LLHcD","/chat-static/_next/static/chunks/1t2vvxh4dupb4.js?dpl=dpl_BBh7b8nxE32otBwcMX89KM8LLHcD","/chat-static/_next/static/chunks/0titma9j-a7ar.js?dpl=dpl_BBh7b8nxE32otBwcMX89KM8LLHcD","/chat-static/_next/static/chunks/1ovy71-w2povn.js?dpl=dpl_BBh7b8nxE32otBwcMX89KM8LLHcD","/chat-static/_next/static/chunks/05vo5x924wz4s.js?dpl=dpl_BBh7b8nxE32otBwcMX89KM8LLHcD","/chat-static/_next/static/chunks/37rh4z4c9595s.js?dpl=dpl_BBh7b8nxE32otBwcMX89KM8LLHcD","/chat-static/_next/static/chunks/0hms8tz4_m27c.js?dpl=dpl_BBh7b8nxE32otBwcMX89KM8LLHcD","/chat-static/_next/static/chunks/332d35_pah0kr.js?dpl=dpl_BBh7b8nxE32otBwcMX89KM8LLHcD","/chat-static/_next/static/chunks/2ibwxl4ivr8yr.js?dpl=dpl_BBh7b8nxE32otBwcMX89KM8LLHcD","/chat-static/_next/static/chunks/1j9njtdk43kba.js?dpl=dpl_BBh7b8nxE32otBwcMX89KM8LLHcD","/chat-static/_next/static/chunks/1idn80rtjcasd.js?dpl=dpl_BBh7b8nxE32otBwcMX89KM8LLHcD","/chat-static/_next/static/chunks/0iy7dg8hl1oew.js?dpl=dpl_BBh7b8nxE32otBwcMX89KM8LLHcD","/chat-static/_next/static/chunks/2nl7z8xw_3un6.js?dpl=dpl_BBh7b8nxE32otBwcMX89KM8LLHcD","/chat-static/_next/static/chunks/1mo0iq2atp502.js?dpl=dpl_BBh7b8nxE32otBwcMX89KM8LLHcD","/chat-static/_next/static/chunks/3-9165k65ag24.js?dpl=dpl_BBh7b8nxE32otBwcMX89KM8LLHcD","/chat-static/_next/static/chunks/326ugcf3n9jpc.js?dpl=dpl_BBh7b8nxE32otBwcMX89KM8LLHcD","/chat-static/_next/static/chunks/27d-e_mtrq80p.js?dpl=dpl_BBh7b8nxE32otBwcMX89KM8LLHcD","/chat-static/_next/static/chunks/046fqcvlcxx_w.js?dpl=dpl_BBh7b8nxE32otBwcMX89KM8LLHcD","/chat-static/_next/static/chunks/0xwyo-vptg1nc.js?dpl=dpl_BBh7b8nxE32otBwcMX89KM8LLHcD","/chat-static/_next/static/chunks/1pr8_b61w-4h9.js?dpl=dpl_BBh7b8nxE32otBwcMX89KM8LLHcD","/chat-static/_next/static/chunks/112qjy1w8koap.js?dpl=dpl_BBh7b8nxE32otBwcMX89KM8LLHcD","/chat-static/_next/static/chunks/3usbrh3-7_sgf.js?dpl=dpl_BBh7b8nxE32otBwcMX89KM8LLHcD","/chat-static/_next/static/chunks/31wev-p231v4h.js?dpl=dpl_BBh7b8nxE32otBwcMX89KM8LLHcD","/chat-static/_next/static/chunks/0sx9749urv_93.js?dpl=dpl_BBh7b8nxE32otBwcMX89KM8LLHcD","/chat-static/_next/static/chunks/3ryomgio2a6mv.js?dpl=dpl_BBh7b8nxE32otBwcMX89KM8LLHcD","/chat-static/_next/static/chunks/2jnp9xm5999w6.js?dpl=dpl_BBh7b8nxE32otBwcMX89KM8LLHcD","/chat-static/_next/static/chunks/02buq-_-_ooco.js?dpl=dpl_BBh7b8nxE32otBwcMX89KM8LLHcD","/chat-static/_next/static/chunks/3ec3uj44xo5pu.js?dpl=dpl_BBh7b8nxE32otBwcMX89KM8LLHcD","/chat-static/_next/static/chunks/013l2updr-opq.js?dpl=dpl_BBh7b8nxE32otBwcMX89KM8LLHcD","/chat-static/_next/static/chunks/0r29it158n54m.js?dpl=dpl_BBh7b8nxE32otBwcMX89KM8LLHcD"],"ExplicitChatIdProvider"] 8e:I[838238,["/chat-static/_next/static/chunks/1j0feqpmh6fhf.js?dpl=dpl_BBh7b8nxE32otBwcMX89KM8LLHcD","/chat-static/_next/static/chunks/30d-un2oicmhe.js?dpl=dpl_BBh7b8nxE32otBwcMX89KM8LLHcD","/chat-static/_next/static/chunks/00c0bu24wji78.js?dpl=dpl_BBh7b8nxE32otBwcMX89KM8LLHcD","/chat-static/_next/static/chunks/2druaqheowhl8.js?dpl=dpl_BBh7b8nxE32otBwcMX89KM8LLHcD","/chat-static/_next/static/chunks/0_e8e66vbc81m.js?dpl=dpl_BBh7b8nxE32otBwcMX89KM8LLHcD","/chat-static/_next/static/chunks/2gyzl_dalq47j.js?dpl=dpl_BBh7b8nxE32otBwcMX89KM8LLHcD","/chat-static/_next/static/chunks/0sex0gcwdsmjy.js?dpl=dpl_BBh7b8nxE32otBwcMX89KM8LLHcD","/chat-static/_next/static/chunks/0wkge2f3s0f22.js?dpl=dpl_BBh7b8nxE32otBwcMX89KM8LLHcD","/chat-static/_next/static/chunks/1ggzqs8-kdl22.js?dpl=dpl_BBh7b8nxE32otBwcMX89KM8LLHcD","/chat-static/_next/static/chunks/0rrc9lo-bkkh5.js?dpl=dpl_BBh7b8nxE32otBwcMX89KM8LLHcD","/chat-static/_next/static/chunks/1j5k8gvtw8gdc.js?dpl=dpl_BBh7b8nxE32otBwcMX89KM8LLHcD","/chat-static/_next/static/chunks/42mjea_hxrwdp.js?dpl=dpl_BBh7b8nxE32otBwcMX89KM8LLHcD","/chat-static/_next/static/chunks/0a4mwgsvj_bqu.js?dpl=dpl_BBh7b8nxE32otBwcMX89KM8LLHcD","/chat-static/_next/static/chunks/1t2vvxh4dupb4.js?dpl=dpl_BBh7b8nxE32otBwcMX89KM8LLHcD","/chat-static/_next/static/chunks/0titma9j-a7ar.js?dpl=dpl_BBh7b8nxE32otBwcMX89KM8LLHcD","/chat-static/_next/static/chunks/1ovy71-w2povn.js?dpl=dpl_BBh7b8nxE32otBwcMX89KM8LLHcD","/chat-static/_next/static/chunks/05vo5x924wz4s.js?dpl=dpl_BBh7b8nxE32otBwcMX89KM8LLHcD","/chat-static/_next/static/chunks/37rh4z4c9595s.js?dpl=dpl_BBh7b8nxE32otBwcMX89KM8LLHcD","/chat-static/_next/static/chunks/0hms8tz4_m27c.js?dpl=dpl_BBh7b8nxE32otBwcMX89KM8LLHcD","/chat-static/_next/static/chunks/332d35_pah0kr.js?dpl=dpl_BBh7b8nxE32otBwcMX89KM8LLHcD","/chat-static/_next/static/chunks/2ibwxl4ivr8yr.js?dpl=dpl_BBh7b8nxE32otBwcMX89KM8LLHcD","/chat-static/_next/static/chunks/1j9njtdk43kba.js?dpl=dpl_BBh7b8nxE32otBwcMX89KM8LLHcD","/chat-static/_next/static/chunks/1idn80rtjcasd.js?dpl=dpl_BBh7b8nxE32otBwcMX89KM8LLHcD","/chat-static/_next/static/chunks/0iy7dg8hl1oew.js?dpl=dpl_BBh7b8nxE32otBwcMX89KM8LLHcD","/chat-static/_next/static/chunks/2nl7z8xw_3un6.js?dpl=dpl_BBh7b8nxE32otBwcMX89KM8LLHcD","/chat-static/_next/static/chunks/1mo0iq2atp502.js?dpl=dpl_BBh7b8nxE32otBwcMX89KM8LLHcD","/chat-static/_next/static/chunks/3-9165k65ag24.js?dpl=dpl_BBh7b8nxE32otBwcMX89KM8LLHcD","/chat-static/_next/static/chunks/326ugcf3n9jpc.js?dpl=dpl_BBh7b8nxE32otBwcMX89KM8LLHcD","/chat-static/_next/static/chunks/27d-e_mtrq80p.js?dpl=dpl_BBh7b8nxE32otBwcMX89KM8LLHcD","/chat-static/_next/static/chunks/046fqcvlcxx_w.js?dpl=dpl_BBh7b8nxE32otBwcMX89KM8LLHcD","/chat-static/_next/static/chunks/0xwyo-vptg1nc.js?dpl=dpl_BBh7b8nxE32otBwcMX89KM8LLHcD","/chat-static/_next/static/chunks/1pr8_b61w-4h9.js?dpl=dpl_BBh7b8nxE32otBwcMX89KM8LLHcD","/chat-static/_next/static/chunks/112qjy1w8koap.js?dpl=dpl_BBh7b8nxE32otBwcMX89KM8LLHcD","/chat-static/_next/static/chunks/3usbrh3-7_sgf.js?dpl=dpl_BBh7b8nxE32otBwcMX89KM8LLHcD","/chat-static/_next/static/chunks/31wev-p231v4h.js?dpl=dpl_BBh7b8nxE32otBwcMX89KM8LLHcD","/chat-static/_next/static/chunks/0sx9749urv_93.js?dpl=dpl_BBh7b8nxE32otBwcMX89KM8LLHcD","/chat-static/_next/static/chunks/3ryomgio2a6mv.js?dpl=dpl_BBh7b8nxE32otBwcMX89KM8LLHcD","/chat-static/_next/static/chunks/2jnp9xm5999w6.js?dpl=dpl_BBh7b8nxE32otBwcMX89KM8LLHcD","/chat-static/_next/static/chunks/02buq-_-_ooco.js?dpl=dpl_BBh7b8nxE32otBwcMX89KM8LLHcD","/chat-static/_next/static/chunks/3ec3uj44xo5pu.js?dpl=dpl_BBh7b8nxE32otBwcMX89KM8LLHcD","/chat-static/_next/static/chunks/013l2updr-opq.js?dpl=dpl_BBh7b8nxE32otBwcMX89KM8LLHcD","/chat-static/_next/static/chunks/0r29it158n54m.js?dpl=dpl_BBh7b8nxE32otBwcMX89KM8LLHcD"],"SWRDataProvider"] 8f:T15a2,[V0_FILE]typescriptreact:file="components/hero-video-dialog-demo.tsx" import HeroVideoDialog from "@/components/magicui/hero-video-dialog" export default function HeroVideoDialogDemo() { return (

) } [V0_FILE]typescriptreact:file="components/magicui/hero-video-dialog.tsx" /* eslint-disable @next/next/no-img-element */ "use client" import { useState } from "react" import { AnimatePresence, motion } from "motion/react" import { Play, XIcon } from "lucide-react" import { cn } from "@/lib/utils" type AnimationStyle = | "from-bottom" | "from-center" | "from-top" | "from-left" | "from-right" | "fade" | "top-in-bottom-out" | "left-in-right-out" interface HeroVideoProps { animationStyle?: AnimationStyle videoSrc: string thumbnailSrc: string thumbnailAlt?: string className?: string } const animationVariants = { "from-bottom": { initial: { y: "100%", opacity: 0 }, animate: { y: 0, opacity: 1 }, exit: { y: "100%", opacity: 0 }, }, "from-center": { initial: { scale: 0.5, opacity: 0 }, animate: { scale: 1, opacity: 1 }, exit: { scale: 0.5, opacity: 0 }, }, "from-top": { initial: { y: "-100%", opacity: 0 }, animate: { y: 0, opacity: 1 }, exit: { y: "-100%", opacity: 0 }, }, "from-left": { initial: { x: "-100%", opacity: 0 }, animate: { x: 0, opacity: 1 }, exit: { x: "-100%", opacity: 0 }, }, "from-right": { initial: { x: "100%", opacity: 0 }, animate: { x: 0, opacity: 1 }, exit: { x: "100%", opacity: 0 }, }, fade: { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, }, "top-in-bottom-out": { initial: { y: "-100%", opacity: 0 }, animate: { y: 0, opacity: 1 }, exit: { y: "100%", opacity: 0 }, }, "left-in-right-out": { initial: { x: "-100%", opacity: 0 }, animate: { x: 0, opacity: 1 }, exit: { x: "100%", opacity: 0 }, }, } export default function HeroVideoDialog({ animationStyle = "from-center", videoSrc, thumbnailSrc, thumbnailAlt = "Video thumbnail", className, }: HeroVideoProps) { const [isVideoOpen, setIsVideoOpen] = useState(false) const selectedAnimation = animationVariants[animationStyle] return (

setIsVideoOpen(true)}> {thumbnailAlt}

{isVideoOpen && ( setIsVideoOpen(false)} exit={{ opacity: 0 }} className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-md" >

)}

) } 84:["$","$L8d",null,{"chatId":"6nNNauho32u","children":["$","$L8e",null,{"data":{"@\"active-block\",\"6nNNauho32u\",":{"id":"b_xchIq1ujmwJ","messageId":"FOyGhcSwVwHBgXok8vWNEt5aSaeY4zM8","source":"$8f","language":"typescriptreact","type":"code-project","closed":true,"meta":{"id":"Hero Video Dialog Demo","type":"code-project","project":"Hero Video Dialog Demo"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"6nNNauho32u\",":false,"":null},"children":"$L90"}]}]

About

Tags

Share

About

Tags

Share

More from dillion

More Templates Like This